<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>评论</title>

    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">
</head>

<body>
    <!-- header -->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="widget-body widget-default margin-b-60">
                <div class="trade-list">

                </div>
            </div>
        </div>
    </div>

    <div class="hobby-footer1 display-flex">
        <textarea placeholder="我也来说两句" id="myText" cols="30" rows="10"></textarea>
        <div class="send" onclick="saveComment()">发送</div>
    </div>

    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>

    <script>
        var page = 1;
        var limit = 10;
        var index = 0;
        var thisClick = false;
        var objectId =  localStorage.getItem("comment-object-id");
        // var objectId = 'dc19623e-b34d-4327-897c-19ad55427304';
        var all_data = new Array();
        //回复的那条评论Id
        var commentId = '';
        $(document).ready(function () {

            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        auto: true, // 首次进入自动加载
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
        });

        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            commentId = '';
            $("#myText").attr('placeholder', '我也来说两句 ');
            $("#myText").val("");
            page = 1;
            var data = {
                userAccId: getUserId(),
                objectId: objectId,
                commentType: '9',
                page: page,
                limit: limit
            }
            getServerData(url_getCommentList, data);
        }

        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            commentId = '';
            $("#myText").attr('placeholder', '我也来说两句 ');
            $("#myText").val("");
            page++;
            var data = {
                userAccId: getUserId(),
                objectId: objectId,
                commentType: '9',
                page: page,
                limit: limit
            }
            getServerData(url_getCommentList, data);
        }


        function getServerDataSuccess(url, data) {
            switch (url) {
                //详情
                case url_getCommentList:
                    var list = data.list;
                    var html_data = "";
                    if (page == 1) {
                        index = 0;
                        all_data.length = 0;
                    }
                    if (list.length > 0) {
                        for (var i = 0; i < list.length; i++) {
                            all_data.push(list[i]);
                            html_data += getHtml(list[i]);
                            index++;
                        };
                    }
                    if (page == 1) {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                        if (list.length > 0) {
                            mui('#pullrefresh').pullRefresh().refresh(true);
                        }
                        $(".trade-list").html(html_data);
                    } else {
                        $(".trade-list").append(html_data);
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(list.length != limit);
                    }
                    break;
                case url_replayComment:
                    commentId = '';
                    $("#myText").attr('placeholder', '我也来说两句 ');
                    $("#myText").val("");
                    var list = data.data;
                    var html = getHtml(list);
                    $(html).prependTo($(".trade-list"));
                    showAlert("回复成功");
                    break;
                case url_publishComment:
                    $("#myText").attr('placeholder', '我也来说两句 ');
                    $("#myText").val("");
                    var list = data.data;
                    var html = getHtml(list);
                    $(html).prependTo($(".trade-list"));
                    showAlert("评论成功");
                    break;
                case url_deleteComment:
                    pulldownRefresh();
                    layer.open({
                        content: '删除成功',
                        btn: ['确定'],
                        yes: function (index) {
                            layer.close(index);
                        }
                    });
                    break;

            }
        }

        function getHtml(list) {
            var html_data = '<div class="commentTb"><div class="display-flex padding-b-10" id="' + list.userAccId +
                '">' +
                '<img class="farm-head" src="' + (isEmpty(list.imgPath) ? "../img/headimg.png" : showSmallImg(list
                    .imgPath)) + '" alt="">' +
                '<div class="display-flex flex-column justify-content-between margin-l-10">';
            if (list.comment != null) {
                html_data += '<p class="elli1 font-weight gray font-13 no-margin">' + list.userName +
                    '<span  class="padding-l-5 padding-r-5 blue1 reply-btn" > 回复 </span > ' + list.comment.userName +
                    '</p > ';
            } else {
                html_data += '<span class="elli1 font-weight gray font-13">' + list.userName + '</span>';
            }

            html_data += '<span class="gray font-13">' + list.createTime + '</span>' +
                '</div>' +
                '</div>' +
                '<p class="font-13 black no-margin">' + list.content + '</p>' +
                '<div class="text-right gray font-13"> <span class="reply-btn" id="' + list.userName + '" commentId="' +
                list.id + '">回复</span>';
            if (list.userAccId == getUserId()) {
                html_data += '<span class="padding-l-15 delete-btn"  commentId="' + list.id + '">删除</span>';
            }

            html_data += '</div></div>';
            return html_data;

        }

        function getServerDataFailed(url, data) {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }

        mui(".trade-list").on('tap', '.person-info', function () {
            localStorage.setItem("person-id", $(this).attr("id"));
            dsBridge.call("goPersonInfo");

        });

        mui(".trade-list").on('tap', '.reply-btn', function () {
            document.getElementById("myText").focus();
            commentId = $(this).attr("commentId");
            $("#myText").attr('placeholder', '回复 ' + $(this).attr("id") + ":");
            thisClick = true;
            event.stopPropagation();

        });

        mui(".trade-list").on('tap', '.delete-btn', function () {
            commentId = $(this).attr("commentId");
            layer.open({
                content: '是否删除该条记录？',
                btn: ['删除', '取消'],
                yes: function (index) {
                    var data = {
                        commentId: commentId,
                        commentType: '9'
                    }
                    getServerData(url_deleteComment, data, "POST");
                    layer.close(index);
                }
            });

        });
        mui("#pullrefresh").on('tap', '.trade-list', function () {
            if (thisClick) {
                document.getElementById("myText").blur();
                commentId = '';
                $("#myText").attr('placeholder', '我也来说两句 ');
                $("#myText").val("");
                thisClick = false;
            }

        })


        function saveComment() {
            var myText = $("#myText").val();
            if (myText == '') {
                showToast("请输入内容");
                return;
            }
            if (commentId != '') {
                var data = {
                    userAccId: getUserId(),
                    commentId: commentId,
                    commentObjectId: objectId,
                    content: $("#myText").val(),
                    commentType: '9'
                }
                getServerData(url_replayComment, data);
            } else {
                var data = {
                    userAccId: getUserId(),
                    commentObjectId: objectId,
                    content: $("#myText").val(),
                    commentType: '9'
                }
                getServerData(url_publishComment, data);
            }
        }
    </script>

</body>

</html>